
<template>
  <div class="main-container">
    <div class="filtrate-bar">
      <div class="title-box">
        <div class="icon-box">
          <span class="wk wk-my-task icon" />
        </div>
        <span class="text">{{ reportTitle }}</span>
       
        <a-select default-value="type" v-model="ownerBuId" :style="{width: '150px', marginBottom: '8px', marginLeft: '10px' }" @change="handleType2">
            <a-select-option value="1">全部 </a-select-option>
            <a-select-option v-for="(item, index) in childMap" :key="index" :value="item.userLoginId"
              >{{ item.name }}
            </a-select-option>
        </a-select>
      </div>
    </div>

    <div class="content">
      <div class="axis-content" v-if="axisList&&axisList.length > 0">
        <div id="axismain" />
      </div>
      <div class="table-content" v-if="tableList&&tableList.length > 0">
        <div class="handle-bar">
          <a-button class="export-btn" type="primary" icon="download" @click="handleExportXls">导出</a-button>
        </div>
        <a-table :scroll="{ y: 340 }" :columns="fieldList" :data-source="tableList" :pagination="false" />
      </div>
    </div>
  </div>
</template>

<script>
import { postAction, downFile,getAction } from '@/api/manage'
import * as echarts from 'echarts'

export default {
  name: 'statistics',
  data() {
    return {
      reportId: '',
      reportTitle: '',
      ownerBuId:"1",
      loading: false,
      childMap: {},
      axisOption: null,
      postParams: {}, // 筛选参数
      dataIndex: null,
      list: [],
      axisList: [],
      fieldList: [],
      tableList: [],
      keyList: [],
      url: {
        executeGraphReport: '/online/api/executeGraphReport',
        exportXlsUrl: '/online/api/export/exportXlsGraphReport',
         getAllBU: '/online/api/getAllBU',
      },
    }
  },
  computed: {
    // 列表请求参数
    listPostParams() {
      const params = { ...this.postParams }
      if (this.dataIndex !== undefined && this.dataIndex !== null) {
        const dataItem = this.axisList[this.dataIndex]
        delete params.type
        params.startTime = dataItem.type
        params.endTime = dataItem.type
      }
      return params
    },
  },
  watch: {
    $route(to, from) {
      this.tableList = []
      this.fieldList = []
      this.keyList = []
      this.chartData = []
      this.itemList = []

      this.getDataIno("{ownerBuId:'"+this.ownerBuId+"'}")
      setTimeout(() => {
        this.getChildData()
        if (this.axisList&&this.axisList.length > 0) {
          this.initAxis()
          //柱状图数据
          this.getReportList()
        }
      }, 500)
    },
  },
  mounted() {
    this.getChildData()
    this.getDataIno("{ownerBuId:'"+this.ownerBuId+"'}")
    setTimeout(() => {
      if (this.axisList.length > 0) {
        this.initAxis()
        //柱状图数据
        this.getReportList()
      }
    }, 500)
  },
  methods: {
    getChildData() {
      getAction(this.url.getAllBU, null).then((res) => {
        this.childMap = res.result.childMap || []
      })
    },
    // 导出表格
    handleExportXls(fileName) {
      if (!fileName || typeof fileName != 'string') {
        fileName = '导出文件'
      }
      let param = { id: this.reportId,serviceParameters:"{ownerBuId:'"+this.ownerBuId+"'}" }
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    /**
     * 搜索点击
     */
    searchClick(params) {
      this.postParams = params
      this.getData()
      setTimeout(() => {
        //柱状图数据
        this.getReportList()
      }, 500)
    },
    async getDataIno(params) {
      this.loading = true
      this.reportId = this.$route.params.code?this.$route.params.code:'customerNumService'
      const res = await postAction(this.url.executeGraphReport, { id: this.reportId,serviceParameters:params })
      this.reportTitle = res.result.reportName
      this.tableList = res.result.itemList
      this.axisList = res.result.chartData || []
      this.keyList = res.result.itemListKeyList
      if(this.keyList){
        this.keyList.forEach((item, index) => {
        this.fieldList.push({ title: this.keyList[index], dataIndex: this.keyList[index], key: this.keyList[index] })
      })
      }
      
    },
    /**
     * 图表数据   待完善
     */
    getReportList() {
      const dealData = []
      const numData = []
      const legendData = []
      for (let index = 0; index < this.axisList.length; index++) {
        const element = this.axisList[index]
        numData.push(element.value)
        if(element.key){
          legendData.push(element.key)
        }else{
          legendData.push(element.name)
        }
      }
      //横坐标
      this.axisOption.xAxis[0].data = legendData
      //数据值
      this.axisOption.series[0].data = numData
      this.chartObj.setOption(this.axisOption, true)
    },
    /** 柱状图 */
    initAxis() {
      this.chartObj = echarts.init(document.getElementById('axismain'))
      this.axisOption = {
        color: ['#6ca2ff', '#ff7474'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ['新增客户数'],
          bottom: '0px',
          itemWidth: 14,
        },
        grid: {
          top: '40px',
          left: '20px',
          right: '20px',
          bottom: '40px',
          containLabel: true,
          borderColor: '#fff',
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true,
              lineStyle: { width: 0 },
            },
            axisLabel: {
              color: '#333',
            },
            /** 坐标轴轴线相关设置 */
            axisLine: {
              lineStyle: { color: '#333' },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '新增客户数',
            axisTick: {
              alignWithLabel: true,
              lineStyle: { width: 0 },
            },
            axisLabel: {
              color: '#333',
              formatter: '{value} 个',
            },
            /** 坐标轴轴线相关设置 */
            axisLine: {
              lineStyle: { color: '#333' },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '新增客户数',
            type: 'bar',
            yAxisIndex: 0,
            barMaxWidth: 15,
            data: [],
          },
        ],
      }
    },
    handleType2(){
      this.tableList = []
      this.fieldList = []
      this.keyList = []
      this.chartData = []
      this.itemList = []

      this.getDataIno("{ownerBuId:'"+this.ownerBuId+"'}")
      setTimeout(() => {
        this.getChildData()
        if (this.axisList&&this.axisList.length > 0) {
          this.initAxis()
          //柱状图数据
          this.getReportList()
        }
      }, 500)
    },
    /**
     * 导出点击
     */
    exportClick() {
      this.requestExportInfo(biCustomerTotalListExportAPI, this.listPostParams)
    },
  },
}
</script>


<style lang="less" scoped>
.main-container {
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  background-color: white;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.filtrate-bar {
  background-color: white;
  padding: 15px 20px 5px 20px;
  margin-right: 15px;
  line-height: 34px;
  .icon-box {
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    color: #168a40;
    background-color: #dfe8ff;
    border-radius: 50%;
    margin-right: 10px;
    float: left;
  }
  .text {
    font-size: 17px;
    font-weight: 700;
  }
}

.content {
  height: calc(100% - 54px);
  overflow-y: auto;
  padding: 10px 0;
}

.content-title {
  padding: 10px 20px 5px;
  font-size: 16px;
  color: #333;
}

.axis-content {
  padding: 20px 10% 40px;
  position: relative;
  .axismain,
  #axismain {
    margin: 0 auto;
    width: 100%;
    height: 400px;
  }
}

.table-content {
  padding: 0 60px 20px 60px;
}

.export-button {
  float: right;
  margin-right: 22px;
}

// 导出操作bug
.handle-bar {
  margin-bottom: 8px;
  text-align: right;
}

.search-box {
  padding-right: 15px;
}

.radio-box {
  padding: 0 20px;
  margin-bottom: 15px;
  /deep/ .el-radio__label {
    color: #99a9bf !important;
  }
}

.static {
  padding: 0 20px;
  margin-bottom: 10px;
  .text {
    font-size: 13px;
    color: #99a9bf;
    display: inline-block;
  }
  .text:not(:last-child) {
    margin-right: 15px;
  }
}
/deep/ .ant-table-wrapper {
  height: 400px;
  border: 1px solid #ebeef5;
}
/deep/ .ant-table-placeholder {
  display: none;
}
</style>

